<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新增统计图表</title>
    <link type="favicon" rel="shortcut icon" href="./static/img/favicon.ico" />
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/common.css">
    <link rel="stylesheet" href="./static/css/charts.css">
    <link rel="stylesheet" href="./static/css/chartist/chartist.min.css">
    <link rel="stylesheet" href="./static/less/addChart.css">
    <link href="./static/css/spop.min.css" rel="stylesheet"/>
    <script src="./static/js/Syunew6.js"></script>
    <script src="./static/js/isLogin.js"></script>
</head>
<body>
    <div id="addChart" class="addChart-box common-box">
        <div class="head-box">
            <div class="logo-box">
                <img class="logo" src="./static/img/logo_1.png" alt="">
                <span class="title">成都杜甫草堂博物馆综合信息管理平台</span>
            </div>
            <div class="user-box">
                <div class="name">{{userData.userName}}，欢迎您</div>
                <div class="logout">
                    <span @click="logout" class="cus">
                        <i class="glyphicon glyphicon-log-out"></i>
                        <span>登出</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="address-box">
                <div class="address">
                    <a class="href" href="/index.html">首页</a>
                    <i class="glyphicon glyphicon-menu-right right"></i>
                    <a class="href" href="/statistical.html">统计分析</a>
                    <i class="glyphicon glyphicon-menu-right right"></i>
                    <span>新增图表</span>
                </div>
                <div class="time">
                    {{date + '&nbsp;星期' + week + '&nbsp;' + time}}
                </div>
            </div>
            <div class="tab">
                <p class="title current">新增图表</p>
            </div>
            <div class="con-box">
                <div id="first-step" class="step" v-show="step === 1">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">第一步：选择布局模板</h3>
                        </div>
                        <div class="panel-body">
                            <div class="template-box clearfix">
                                <div class="col-lg-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-title">
                                            <h5 class="chart-title">模板一</h5>
                                            <div class="ibox-tools">
                                                <input type="checkbox" :checked="tem === 1 ? true : false" @click="tem = 1">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="row">
                                        <div class="col-lg-9 chart-demo-box">
                                            图表一
                                        </div>
                                        <div class="col-lg-3 chart-demo-box">
                                            图表二
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="template-box clearfix">
                                <div class="col-lg-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-title">
                                            <h5 class="chart-title">模板二</h5>
                                            <div class="ibox-tools">
                                                <input type="checkbox" :checked="tem === 2 ? true : false" @click="tem = 2">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="row">
                                        <div class="col-lg-6 chart-demo-box">
                                            图表一
                                        </div>
                                        <div class="col-lg-6 chart-demo-box">
                                            图表二
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <div class="nextBtn">
                        <button type="button" class="btn btn-primary btn-lg" @click="step = 2">下一步 <i class="glyphicon glyphicon-arrow-right"></i></button>
                    </div>
                </div>
                <div id="second-step" class="step" v-show="step === 2">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">第二步：选择图表模板</h3>
                        </div>
                        <div class="panel-body">
                            <div class="template-box clearfix">
                                <div class="col-lg-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-title">
                                            <h5 class="chart-title">模板一</h5>
                                            <div class="ibox-tools">
                                                <input type="checkbox" :checked="chartTem === 1 ? true : false" @click="chartTem = 1">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="row">
                                        <div :class="tem === 1 ? 'col-lg-9' : 'col-lg-6'">
                                            <div class="flot-chart">
                                                <div class="flot-chart-content" id="flot-bar-chart"></div>
                                            </div>
                                        </div>
                                        <div :class="tem === 1 ? 'col-lg-3' : 'col-lg-6'">
                                            <div class="flot-chart">
                                                <div class="flot-chart-content" id="flot-line-chart"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="template-box clearfix">
                                <div class="col-lg-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-title">
                                            <h5 class="chart-title">模板二</h5>
                                            <div class="ibox-tools">
                                                <input type="checkbox" :checked="chartTem === 2 ? true : false" @click="chartTem = 2">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="row">
                                        <div :class="tem === 1 ? 'col-lg-9' : 'col-lg-6'">
                                            <div class="ibox-content">
                                                <div id="ct-chart3" class="flot-chart-content"></div>
                                            </div>
                                        </div>
                                        <div :class="tem === 1 ? 'col-lg-3' : 'col-lg-6'">
                                            <div class="ibox-content">
                                                <div class="col-md-5">
                                                    <div class="flot-chart-content" id="ct-chart5"></div>
                                                </div>
                                                <div class="col-md-5">
                                                    <ul class="star-list">
                                                        <li>
                                                            <i class="glyphicon glyphicon-stop nm_color"></i>
                                                            标签一：数据一
                                                        </li>
                                                        <li>
                                                            <i class="glyphicon glyphicon-stop bm_color"></i>
                                                            标签二：数据二
                                                        </li>
                                                        <li>
                                                            <i class="glyphicon glyphicon-stop dm_color"></i>
                                                            标签三：数据三
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <div class="nextBtn">
                        <div class="one">
                            <button type="button" class="btn btn-primary btn-lg" @click="step = 1"><i class="glyphicon glyphicon-arrow-left"></i> 上一步</button>
                        </div>
                        <div class="tow">
                            <button type="button" class="btn btn-primary btn-lg" @click="step = 3">下一步 <i class="glyphicon glyphicon-arrow-right"></i></button>
                        </div>
                    </div>
                </div>
                <div id="third-step" class="step" v-show="step === 3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">第三步：填写数据</h3>
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">标题</label>
                                    <div class="col-sm-10 col-lg-6">
                                        <input type="email" class="form-control" v-model="title">
                                    </div>
                                </div>
                                <h2 style="text-align: right;width: 16.66%;margin: 10px 0">图表一</h2><br>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">Y轴名称</label>
                                    <div class="col-sm-10 col-lg-6">
                                        <input type="email" class="form-control" v-model="yName[0]">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">数据源</label>
                                    <div class="col-sm-10 col-lg-6">
                                        <input type="email" class="form-control" placeholder="url地址(GET请求方式)" v-model="url[0]">
                                    </div>
                                </div>
                                <h2 style="text-align: right;width: 16.66%;margin: 10px 0">图表二</h2>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">Y轴名称</label>
                                    <div class="col-sm-10 col-lg-6">
                                        <input type="email" class="form-control" v-model="yName[1]">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">数据源</label>
                                    <div class="col-sm-10 col-lg-6">
                                        <input type="email" class="form-control" placeholder="url地址(GET请求方式)" v-model="url[1]">
                                    </div>
                                </div>
                            </form>
                            <div class="nextBtn">
                                    <div class="one">
                                        <button type="button" class="btn btn-primary btn-lg" @click="step = 2"><i class="glyphicon glyphicon-arrow-left"></i> 上一步</button>
                                    </div>
                                    <div class="three" style="flex: 1">
                                        <button type="button" class="btn btn-primary btn-lg" @click="save"> 保存</button>
                                    </div>
                                    <!-- <div class="tow">
                                        <button type="button" class="btn btn-primary btn-lg" @click="view">预&nbsp;&nbsp;览 <i class="glyphicon glyphicon-arrow-right"></i></button>
                                    </div> -->
                                </div>
                            <div style="margin-top:20px">
                                <h2>数据格式说明：</h2>
                                <div>
                                    请求参数：
                                    {
                                        year: '',//年份
                                        start_year: '',//开始年份
                                        end_year: '',//结束年份
                                    }
                                </div>
                                <div>返回示例：</div>
                                <div style="display: flex;justify-content: space-between;flex-wrap: wrap">
                                    <div style="width:50%;margin-top:20px">
                                        <h5>条形图：</h5>
                                        <p>
                                            {</br>
                                                "data": {</br>
                                                    //monthData:12月数据</br>
                                                    "monthData": {</br>
                                                        //year:对应年份</br>
                                                        "year": 2018,</br>
                                                        //list: 数据["月份","值"]</br>
                                                        "list": [[1,34],[2,25],[3,19],[4,34],[5,32],[6,44],[7,58],[8,42],[9,50],[10,45],[11,40],[12,52]],</br>
                                                    },</br>
                                                    //yearData：年份数据</br>
                                                    "yearData": {</br>
                                                        //interval: 年份区间</br>
                                                        "interval": [2013,2018],</br>
                                                        //list: 数据["年份","值"]</br>
                                                        "list": [[2013,300],[2014,280],[2015,250],[2016,288],[2017,260],[2018,400]],</br>
                                                    }</br>
                                                }</br>
                                            }
                                        </p>
                                    </div>
                                    <div style="width:50%;margin-top:20px">
                                        <h5>折线图</h5>
                                        <p>
                                            {</br>
                                                "data": {</br>
                                                    //monthData:12月数据</br>
                                                    "monthData": {</br>
                                                        //year:对应年份</br>
                                                        "year": 2018,</br>
                                                        //list: 数据["月份","值"]</br>
                                                        "list": [[1,34],[2,25],[3,19],[4,34],[5,32],[6,44],[7,58],[8,42],[9,50],[10,45],[11,40],[12,52]],</br>
                                                    },</br>
                                                    //yearData：年份数据</br>
                                                    "yearData": {</br>
                                                        //interval: 年份区间</br>
                                                        "interval": [2013,2018],</br>
                                                        //list: 数据["年份","值"]</br>
                                                        "list": [[2013,300],[2014,280],[2015,250],[2016,288],[2017,260],[2018,400]],</br>
                                                    }</br>
                                                }</br>
                                            }
                                        </p>
                                    </div>
                                    <div style="width:50%;margin-top:20px">
                                        <h5>堆叠条形图</h5>
                                        <p>
                                            {</br>
                                                "data": {</br>
                                                    //dayData: 按日显示数据</br>
                                                    "dayData": {</br>
                                                        //month: 月份</br>
                                                        "month": "12",</br>
                                                        //list: 数据</br>
                                                        "list": {</br>
                                                            "data1": [5, 12, 14, 13, 8, 12, 14, 13,8, 12, 14, 13, 8, 12, 14, 13, 8, 12, 14, 13, 8, 12, 14, 13, 8, 12, 14, 13, 20, 18, 16],</br>
                                                            "data2": [5, 4, 5, 3, 5, 4, 5, 3, 10, 5, 4, 5, 3, 10, 5, 4, 5, 3, 10,5, 4, 5, 3, 10, 5, 4, 5, 3, 10, 5, 7],</br>
                                                            "data3": [5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6,5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 4, 2, 4],</br>
                                                            "data4": [5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 4, 2, 6]</br>
                                                        }</br>
                                                    },</br>
                                                    //monthData: 按月显示数据</br>
                                                    "monthData": {</br>
                                                        //year：年份</br>
                                                        "year": "2018",</br>
                                                        "list": {</br>
                                                            "data1": [50, 120, 140, 130, 80, 120, 140, 130, 80, 120, 140, 130],</br>
                                                            "data2": [50, 40, 50, 30, 50, 40, 50, 30, 100, 50, 40, 50],</br>
                                                            "data3": [50, 20, 40, 60, 50, 20, 40, 60, 50, 20, 40, 60],</br>
                                                            "data4": [50, 20, 40, 60, 50, 20, 40, 60, 50, 20, 40, 60]</br>
                                                        }</br>
                                                    },</br>
                                                    //yearData：按年显示数据</br>
                                                    "yearData": {</br>
                                                        //interval:年份区间</br>
                                                        "interval": [2013,2018],</br>
                                                        "list": {</br>
                                                            "data1": [500, 1200, 1400, 1300, 800, 1000],</br>
                                                            "data2": [500, 400, 500, 300, 500, 560],</br>
                                                            "data3": [500, 200, 400, 600, 500, 660],</br>
                                                            "data4": [500, 200, 400, 600, 500, 450]</br>
                                                        }</br>
                                                    }</br>
                                                }</br>
                                            }
                                        </p>
                                    </div>
                                    <div style="width:50%;margin-top:20px">
                                        <h5>饼图</h5>
                                        <p>
                                            {</br>
                                                "data": {</br>
                                                    //dayData: 按日显示数据</br>
                                                    "dayData": {</br>
                                                        //month: 月份</br>
                                                        "month": "12",</br>
                                                        //list: 数据</br>
                                                        "list": {</br>
                                                            "data1": [5, 12, 14, 13, 8, 12, 14, 13,8, 12, 14, 13, 8, 12, 14, 13, 8, 12, 14, 13, 8, 12, 14, 13, 8, 12, 14, 13, 20, 18, 16],</br>
                                                            "data2": [5, 4, 5, 3, 5, 4, 5, 3, 10, 5, 4, 5, 3, 10, 5, 4, 5, 3, 10,5, 4, 5, 3, 10, 5, 4, 5, 3, 10, 5, 7],</br>
                                                            "data3": [5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6,5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 4, 2, 4],</br>
                                                            "data4": [5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 5, 2, 4, 6, 4, 2, 6]</br>
                                                        }</br>
                                                    },</br>
                                                    //monthData: 按月显示数据</br>
                                                    "monthData": {</br>
                                                        //year：年份</br>
                                                        "year": "2018",</br>
                                                        "list": {</br>
                                                            "data1": [50, 120, 140, 130, 80, 120, 140, 130, 80, 120, 140, 130],</br>
                                                            "data2": [50, 40, 50, 30, 50, 40, 50, 30, 100, 50, 40, 50],</br>
                                                            "data3": [50, 20, 40, 60, 50, 20, 40, 60, 50, 20, 40, 60],</br>
                                                            "data4": [50, 20, 40, 60, 50, 20, 40, 60, 50, 20, 40, 60]</br>
                                                        }</br>
                                                    },</br>
                                                    //yearData：按年显示数据</br>
                                                    "yearData": {</br>
                                                        //interval:年份区间</br>
                                                        "interval": [2013,2018],</br>
                                                        "list": {</br>
                                                            "data1": [500, 1200, 1400, 1300, 800, 1000],</br>
                                                            "data2": [500, 400, 500, 300, 500, 560],</br>
                                                            "data3": [500, 200, 400, 600, 500, 660],</br>
                                                            "data4": [500, 200, 400, 600, 500, 450]</br>
                                                        }</br>
                                                    }</br>
                                                }</br>
                                            }
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="loading" v-show="loadingshow">
            <p style="color:#eee;font-size: 20px">{{loadingTips}}，请稍后&nbsp;&nbsp;</p>
            <img src="static/img/loading.gif" alt="">
        </div>
        <div class="footer">
            Copyright 成都杜甫草堂博物馆
        </div>
    </div>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <!-- Flot -->
    <script src="./static/js/plugins/flot/jquery.flot.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="./static/js/plugins/flot/jquery.flot.time.js"></script>

    <!-- Jvectormap -->
    <script src="./static/js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js"></script>
    <script src="./static/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

    <script src="./static/js/jquery.easypiechart.js"></script>
    <script src="./static/js/plugins/chartist/chartist.min.js"></script>
    <!-- <script src="./static/js/plugins/chartJs/Chart.min.js"></script> -->
    <!-- <script src="//s.nodejs.cn/chart/assets/Chart.min.js"></script> -->
    <script src="./static/js/Chart.min.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script src="./static/js/flot-demo.js"></script>
    <script src="./static/js/prism.js"></script>
    <script src="./static/js/spop.min.js"></script>
    <script>
        var addChart = new Vue({
            el: '#addChart',
            data() {
                return {
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy年MM月dd日'),
                    week: this.timeFormat('D'),
                    step: 1,//当前步数
                    tem: 1,//布局模板
                    chartTem: 1,//图表模板
                    baseUrl: api.baseUrl,
                    userData: store.fetch('userLoginInfo'),
                    loadingshow: false,
                    loadingTips: '',
                    // title: '测试',
                    // yName: ['y1','y2'],
                    // url: ['http://127.0.0.1:5500/static/data/volunteerData.json','http://127.0.0.1:5500/static/data/volunteerData.json'],
                    title: '',
                    yName: ['',''],
                    url: ['','']
                }
            },
            created() {

            },
            mounted() {
                this.getDate();
                this.setChart();
            },
            watch: {
                'step': (newValue) => {
                    if(newValue === 2) {
                        // this.setChart();
                        addChart.setChart();
                    }
                    return;
                }
            },
            methods: {
                //时间格式化
                timeFormat(fmt) {
                    let date = new Date();
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    }
                    var o = { 
                        "M+" : date.getMonth()+1,     //月份 
                        "d+" : date.getDate(),     //日 
                        "h+" : date.getHours(),     //小时 
                        "m+" : date.getMinutes(),     //分 
                        "s+" : date.getSeconds(),     //秒 
                        "q+" : Math.floor((date.getMonth()+3)/3), //季度 
                        "S" : date.getMilliseconds(),    //毫秒
                        "D" : week[date.getDay()]
                    }; 
                    if(/(y+)/.test(fmt)) 
                    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
                    for(var k in o) 
                    if(new RegExp("("+ k +")").test(fmt)) 
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
                    return fmt;
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy年MM月dd日');
                        this.week = this.timeFormat('D')
                    },1000)
                },

                //登出
                logout() {
                    store.clear('userData');
                    store.clear('userLoginInfo');
                    window.location.href = '/login.html';
                },

                setChart() {
                    if(this.step === 2){
                        initChart();
                    }
                },

                // save() {
                //     if(!this.url1 || !this.url2) {
                //         alert('请填写数据源地址！');
                //         return false;
                //     }else {
                //         this.loadingshow = true;
                //         setTimeout(() => {
                //             this.loadingshow = false;
                //             alert('校验数据失败，请确认数据格式是否正确！')
                //         },2000)
                //     }
                // },

                save() {
                    if(!this.title) {
                        alert('请填写标题');
                        return false;
                    }
                    if(!this.yName[0] || !this.yName[1]) {
                        alert('请填写Y轴名称!');
                        return false;
                    }
                    if(!this.url[0] || !this.url[1]) {
                        alert('请填写url地址!');
                        return false;
                    }
                    let body = {
                        year: '2019',
                        start_year: '2015',
                        end_year: '2019'
                    }
                    this.loadingshow = true;
                    this.loadingTips = '正在校验数据源有效性'
                    api.chartUrlTest(this.url[0],body).then(res => {
                        let data = res.data;
                        if(!data.data) {
                            this.loadingshow = false;
                            alert('校验数据失败，请确认数据格式是否正确！');
                            return  false;
                        }
                        if(!(data.data.constructor == Object)) {
                            this.loadingshow = false;
                            alert('校验数据失败，请确认数据格式是否正确！');
                            return  false;
                        }else {
                            api.chartUrlTest(this.url[1],body).then(res => {
                                let data = res.data;
                                if(!data.data) {
                                    this.loadingshow = false;
                                    alert('校验数据失败，请确认数据格式是否正确！');
                                    return  false;
                                }
                                if(!(data.data.constructor == Object)) {
                                    this.loadingshow = false;
                                    alert('校验数据失败，请确认数据格式是否正确！');
                                    return  false;
                                }else {
                                    this.submit()
                                }
                            }).catch(err => {
                                this.loadingshow = false;
                                alert('校验数据失败，请确认数据格式是否正确！');
                                return  false;
                            })
                        }
                    }).catch(err => {
                        this.loadingshow = false;
                        alert('校验数据失败，请确认数据格式是否正确！');
                        return  false;
                    })
                },

                submit() {
                    let body = {
                        chartType: this.chartTem,
                        title: this.title,
                        type: this.tem,
                        url: this.url.join(','),
                        yName: this.yName.join(',')
                    }
                    this.loadingTips = '数据校验成功，正在提交中'
                    api.addChart(body).then(res => {
                        if(res.data.status == 'success') {
                            this.loadingshow = false;
                            this.loadingTips = '';
                            alert('数据提交成功！请在用户组打开相应权限即可查看新图表！');
                        }else {
                            alert('数据提交失败!')
                        }
                    })
                },
            }
        })
    </script>
</body>
</html>